<template>
    <div class = "container">
        <div class="content" :style = "'width: ' + styles.width + 'rpx;height: ' + styles.height + 'rpx' ">
            <textarea 
            :value = "content"
            @input = "contentChange"
            :placeholder="place"
            placeholder-style="color: #999;font-size: 28rpx;"
            :maxlength="maxInput">
            </textarea>
            <p>{{ currentLength }}/{{ maxInput }}</p>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            currentLength: 0
        }
    },
    props: ["maxInput","styles","place"],
    methods: {
        contentChange(e){
            this.$emit("change",e.mp.detail.value);
            this.currentLength = e.mp.detail.value.length;
        }
    }
}
</script>
<style lang="scss" scoped>
    .container{
        padding-bottom: 60rpx;
    }
    .content{
        margin: auto;
        textarea{
            padding: 20rpx 28rpx;
            width: calc(100% - 56rpx);
            height: calc(100% - 40rpx);
            border: 1rpx solid #ccc;
            border-radius: 8rpx;
            color: #333;
            font-size: 28rpx;
            word-break: break-all;
            text-align: justify;
        }
        p{
            padding-top: 18rpx;
            color: #999;
            font-size: 24rpx;
            text-align: right
        }
    }
</style>